<template>
	<!--HTML模版-->
  <div :class="[$options.name]" style="height: 100%;width: 100%;">
    <slot/>
  </div>
</template>
<script>
	import Map from 'ol/map'

	import View from 'ol/view';

	import {RENDERER_TYPE} from '../../shared/constants.js'
	import { hasMap, hasView } from '../../utils/assert.js'
	import VectorSource from 'ol/source/vector'
	import VectorLayer from 'ol/layer/vector';
	import XYZ from 'ol/source/xyz';
	import TileLayer from 'ol/layer/tile';
	
	import services from '../../mixin/services.js'
  import Vue from 'vue'

	export default { 
		name: 'vMap',
		components: { //引用组件
		},
		mixins:[services],

		props: { //传参属性值,
			keyboardEventTarget: [String, Element, Document],
			loadTilesWhileAnimating: {
				type: Boolean,
				default: false,
			},
			loadTilesWhileInteracting: {
				type: Boolean,
				default: false,
			},
			pixelRatio: {
				type: Number,
				default: () => window.devicePixelRatio || 1,
			},
			logo: [String, Object, Element, Boolean],
			renderer: {
				type: [String, Array],
				default: () => [RENDERER_TYPE.CANVAS, RENDERER_TYPE.WEBGL],
			},

		},
		data() { //自带属性值
			return {
				map: null,
				baseLayers: [],
				seletedBaseLayer: this.defaultBaseLayer,
				_baseLayersInfo: [],
				currPoint:{x:0,y:0}
			};
		},
		methods: { //方法,,,
			getServices () {
				const _this = this;

				this.$services = this.$services||{};
				Object.assign(this.$services,{
					_map:_this.$_map,
					_view:_this.$_view,
					map:_this
				})
				return this.$services
			},
			setView (view) {
				view = view instanceof Vue ? view.$_view : view
				view || (view = new View())
	
				if (view !== this._view) {
					this._view = view
				}
				if (this.$_map && view !== this.$_map.getView()) {
					this.$_map.setView(view)
				}
			},
			init(){
				
				
			},
			mount () {
				hasMap(this)
				this.$_map.setTarget(this.$el)
				//this.subscribeAll()
				//this.updateSize()
			},
			/**
			 * 创建对应的实例对象
			 */
			createObeject(){
				return function(){
						const map = new Map({
							controls: [],
							loadTilesWhileAnimating: this.loadTilesWhileAnimating,
							loadTilesWhileInteracting: this.loadTilesWhileInteracting,
							pixelRatio: this.pixelRatio,
							renderer: this.renderer,
							logo: this.logo,
							keyboardEventTarget: this.keyboardEventTarget,
							view: this._view,
						})
						// ol.Map constructor can create default view if no provided with options
						this._view = map.getView()
						// add default overlay to map
						this._defaultLayer.setMap(map)
						this._layer.setMap(map)
						/*
						if (this.controls) {
							let opts = typeof this.controls === 'object' ? this.controls : undefined
							map.getControls().extend(olcontrol.defaults(opts).getArray())
						}
						*/
						// map.set('dataProjection', this.dataProjection)
					
						return map
				}
			},
			

		},
		computed: { //计算值，写属性的setter,getter方法
		},
		watch: { //监听值变化
		},
		/**生命周期-开始**/
		beforeCreate() {},
		created() {
			//定义一些私有的挂接对象
			this._view = undefined;
			this._defaultLayer = new VectorLayer({
				source: new VectorSource(),
			})
			this._layer = new TileLayer({
								source: new XYZ({
									url: "http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
								})
							})
			
			this._object = undefined;

			Object.defineProperties(this, /** @lends module:map/map# */{
				/**
				* OpenLayers map instance.
				* @type {ol.Map|undefined}
				*/
				$_map: {
					enumerable: true,
					get: () => this._object,
				},
				/**
				* OpenLayers view instance.
				* @type {ol.View|undefined}
				*/
				$_view: {
					enumerable: true,
					get: () => this._view,
				},
			})
			this._object = (this.createObeject().bind(this))();
			
		},
		beforeMount() {},
		mounted() {
			this.mount();
		},
		beforeUpdate() {},
		updated() {},
		activated() {},
		deactivated() {},
		beforeDestroy() {},
		destroyed() {}
		/**生命周期-结束**/
	}
</script>